<template>
  <div class="container">
    <div class="tab">
      <div
        @click="
          () => {
            kind = 2;
            getList();
          }
        "
        :class="kind === 2 ? 'active item' : 'item'"
      >
        <img v-if="kind === 2" src="@/assets/images/jxzy-a.png" alt="" />
        <img v-else src="@/assets/images/jxzy.png" alt="" />
        教学资源
      </div>
      <div
        @click="
          () => {
            kind = 1;
            getList();
          }
        "
        :class="kind === 1 ? 'active item' : 'item'"
      >
        <img v-if="kind === 1" src="@/assets/images/szzy-a.png" alt="" />
        <img v-else src="@/assets/images/szzy.png" alt="" />
        数字教材
      </div>
    </div>
    <div class="table">
      <div class="search">
        <el-input v-model="keyword" style="max-width: 600px" placeholder="请输入关键字" class="input-with-select">
          <template #append>
            <el-button color="#1881FF" @click="getList()" type="primary" :icon="Search">搜索</el-button>
          </template>
        </el-input>
        <el-date-picker
          style="margin-left: 20px"
          v-model="dateValue"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
        <el-select
          v-if="kind === 2"
          style="width: 200px; margin-left: 20px"
          v-model="selectedFilters.type"
          placeholder="类型筛选"
        >
          <el-option v-for="item in types" :key="item.value" :label="item.lable" :value="item.value"> </el-option>
        </el-select>
      </div>
      <template v-if="kind === 1">
        <div class="filter-section">
          <div class="title">学段</div>
          <div class="filter-options">
            <span
              v-for="method in type"
              :key="method.value"
              class="filter-option"
              :class="{ active: selectedFilters.stage === method.value }"
              @click="toggleTypeMethod(method.value)"
            >
              {{ method.lable }}
            </span>
          </div>
        </div>
        <div class="filter-section">
          <div class="title">学科</div>
          <div class="filter-options">
            <span
              v-for="method in signupMethods"
              :key="method.value"
              class="filter-option"
              :class="{ active: selectedFilters.subjectId === method.value }"
              @click="toggleSignupMethod(method.value)"
            >
              {{ method.lable }}
            </span>
          </div>
        </div>

        <!-- 主办单位 -->
        <div class="filter-section">
          <div class="title">年级</div>
          <div class="filter-options">
            <span
              v-for="org in organizers"
              :key="org.value"
              class="filter-option"
              :class="{ active: selectedFilters.gradeId === org.value }"
              @click="toggleOrganizer(org.value)"
            >
              {{ org.lable }}
            </span>
          </div>
        </div>

        <!-- 适合学段 -->
        <div class="filter-section">
          <div class="title">册次</div>
          <div class="filter-options">
            <span
              v-for="volume in schoolStages"
              :key="volume.value"
              class="filter-option"
              :class="{ active: selectedFilters.volume === volume.value }"
              @click="toggleSchoolStage(volume.value)"
            >
              {{ volume.lable }}
            </span>
          </div>
        </div>
      </template>
      <el-divider />
      <ActiveItem @click="handleDetail(item)" :item="item" v-for="item in list" :type="kind" :key="item" />
      <div class="pagination">
        <el-pagination
          :background="true"
          :current-page="pageable.pageNo"
          :page-size="pageable.pageSize"
          :page-sizes="[10, 25, 50, 100]"
          :total="pageable.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import ActiveItem from "./activeItem.vue";
import { useRouter, useRoute } from "vue-router";
import { getResourceList } from "@/api/modules/wl.js";
import { useUserStore } from "@/stores/modules/user";
import { transformDate } from "@/utils";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();
const keyword = ref("");
const dateValue = ref([]);
const kind = ref(1);
const pageable = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 10
});
const selectedFilters = reactive({
  stage: "",
  subjectId: "",
  gradeId: "",
  volume: "",
  type: ""
});
const types = [
  { lable: "音视频", value: 1 },
  { lable: "课程包", value: 2 },
  { lable: "数字教材", value: 3 }
];
const type = [
  { lable: "幼儿园", value: 1 },
  { lable: "小学", value: 2 },
  { lable: "初中", value: 3 },
  { lable: "高中", value: 4 },
  { lable: "职高", value: 5 }
];
const signupMethods = [
  { lable: "语文", value: 1 },
  { lable: "数学", value: 2 },
  { lable: "英语", value: 3 },
  { lable: "物理", value: 4 },
  { lable: "化学", value: 5 },
  { lable: "生物", value: 6 },
  { lable: "科学", value: 7 },
  { lable: "历史", value: 8 },
  { lable: "地理", value: 9 },
  { lable: "信息技术", value: 10 },
  { lable: "道德与法治", value: 11 }
];
const organizers = [
  { lable: "一年级", value: 1 },
  { lable: "二年级", value: 2 },
  { lable: "三年级", value: 3 },
  { lable: "四年级", value: 4 },
  { lable: "五年级", value: 5 },
  { lable: "六年级", value: 6 }
];
const schoolStages = [
  { lable: "上册", value: 1 },
  { lable: "下册", value: 2 }
];
const list = ref([]);
onMounted(() => {
  kind.value = Number(route.query.type) || 1;
  getList();
});

function getList() {
  const params = {
    pageNo: pageable.pageNo,
    pageSize: pageable.pageSize,
    stage: selectedFilters.stage,
    subjectId: selectedFilters.subjectId,
    gradeId: selectedFilters.gradeId,
    kind: kind.value,
    type: selectedFilters.type,
    keyword: keyword.value
  };
  if (kind.value === 1) {
    params.type = "";
  }
  if (dateValue.value && dateValue.value.length > 0) {
    params.uploadDateStart = transformDate(dateValue.value[0], "local", "YYYY-MM-DD");
    params.uploadDateEnd = transformDate(dateValue.value[1], "local", "YYYY-MM-DD");
  }
  getResourceList(params).then(res => {
    pageable.total = res.rows.total;
    list.value = res.rows.list;
  });
}

function handleDetail(item) {
  console.log("handleDetail");
  localStorage.setItem("resourceDetail", JSON.stringify(item));
  router.push(`/resourceDetail/index`);
}
const toggleTypeMethod = stage => {
  if (selectedFilters.stage === stage) {
    selectedFilters.stage = "";
  } else {
    selectedFilters.stage = stage;
  }
};
const toggleSignupMethod = subjectId => {
  if (selectedFilters.subjectId === subjectId) {
    selectedFilters.subjectId = "";
  } else {
    selectedFilters.subjectId = subjectId;
  }
};

const toggleOrganizer = org => {
  if (selectedFilters.gradeId === org) {
    selectedFilters.gradeId = "";
  } else {
    selectedFilters.gradeId = org;
  }
  console.log("selectedFilters.gradeId", selectedFilters.gradeId);
};

const toggleSchoolStage = volume => {
  if (selectedFilters.volume === volume) {
    selectedFilters.volume = "";
  } else {
    selectedFilters.volume = volume;
  }
};
</script>
<style lang="scss" scoped>
.container {
  width: 1618px;
  margin: 0 auto;
  border: 1px solid #e8f2ff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  .tab {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 108px;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: #899db8;
      cursor: pointer;
      img {
        width: 56px;
        height: 56px;
        margin-right: 10px;
      }
    }
    .active {
      color: #1981ff;
      background-color: #e9f2ff;
    }
  }
}
.table {
  box-sizing: border-box;
  width: 100%;
  padding: 31px 52px;
  .search {
    margin-bottom: 15px;
  }
  .filter-section {
    display: flex;
    gap: 25px;
    align-items: center;
    div {
      margin: 0 0 10px;
      font-size: 16px;
      color: #558eda;
    }

    margin-bottom: 8px;
    font-size: 14px;
    .filter-options {
      color: #3963a6;
      .filter-option {
        display: inline-block;
        padding: 4px 14px;
        margin-right: 15px;
        cursor: pointer;
      }
      .active {
        font-weight: 700;
        color: #1881ff;
        background-color: #e8f2ff;
        border-radius: 10px;
      }
    }
  }
  .pagination {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 40px;
  }
}
</style>
